<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Sign Up Login</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="img/q10.png" type="image/x-icon" />
  <link rel="shortcut icon" href="img/q10.png" type="image/x-icon" />
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>


  <div class="cotn_principal">
    <div class="cont_centrar">
      <div class="cont_login">
        <div class="cont_info_log_sign_up">
          <div class="col_md_login">
            <div class="cont_ba_opcitiy">
              <h2>登录</h2>
              <p>Lorem ipsum dolor sit amet, consectetur.</p>
              <button class="btn_login" onClick="cambiar_login()">登录</button>
            </div>
          </div>
          <div class="col_md_sign_up">
            <div class="cont_ba_opcitiy">
              <h2>注册</h2>
              <p>Lorem ipsum dolor sit amet, consectetur.</p>
              <button class="btn_sign_up" onClick="cambiar_sign_up()">注册</button>
            </div>
          </div>
        </div>
        <div class="cont_back_info">
          <div class="cont_img_back_grey"> <img src="img/po.jpg" alt="" /> </div>
        </div>
        <div class="cont_forms">
          <div class="cont_img_back_"> <img src="img/po.jpg" alt="" /> </div>
          <div class="cont_form_login"> <a href="#" onClick="ocultar_login_sign_up()"><i
                class="material-icons">&#xE5C4;</i></a>
            <h2>登录</h2>
            <input type="text" placeholder="username" id="username" name="username" />
            <input type="password" placeholder="Password" id="password" name="password" />
            <button class="btn_login" onClick="jump()">登录</button>
          </div>
          <div class="cont_form_sign_up"> <a href="#" onClick="ocultar_login_sign_up()"><i
                class="material-icons">&#xE5C4;</i></a>
            <h2>注册</h2>
            <input type="text" placeholder="User" id="usernames" name="usernames" />
            <input type="password" placeholder="Password" id="passwords" name="passwords" />
            <input type="password" placeholder="Confirm Password" id="confirmpasswords" name="confirmpasswords" />
            <button class="btn_sign_up" onClick="jumps()">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="js/index.js"></script>
  <script>
    function jump() {

      let uid = $('#username').val();
      let pwd = $('#password').val();

      console.log(uid);

      if (uid.length > 0 && pwd.length > 0) {
        axios({
          method: 'post',
          url: '/loginDone',
          data: {
            username: uid,
            password: pwd,
          }
        }).then(function (res) {
          // axios工具下，服务器真正返回的数据在返回对象的data中
          res = res.data;
          if (res.code === 200) {
            alert("登陆成功,欢迎你," + uid + "!");
            window.location.href = '/';
          } else {
            alert(res.msg);
          }
        }).catch((err) => {
          alert(err);
        });
      } else {
        alert('警告:用户名、密码不能为空');
      }
    }


    function jumps() {
      let uid = $('#usernames').val();
      let pwd = $('#passwords').val();
      let confirmpassword = $('#confirmpasswords').val();

      if (uid.length > 0 && pwd.length > 0 && pwd === confirmpassword) {
        // 发送 POST 请求
        axios({
          method: 'post',
          url: '/registerDone',

          data: {
            username: uid,
            password: pwd,
            confirmpassword: confirmpassword,
          }
        }).then(function (res) {
          res = res.data;
          if (res.code === 200) {
            alert('注册成功，请登录');
            window.location.reload()
          } else {
            alert(res.msg);
          }
        }).catch((err) => {
          alert(err)
        });

      } else {
        alert('警告:用户名、密码不能为空，并且两次密码应该一致');
      }

    }
  </script>
</body>

</html>